<template>
  <div class="drag">
    <h2>拖拽列表</h2>
    <div class="box">
      <div class="left">
        <ul>
          <li
            draggable="true"
            v-for="(item, index) in options"
            :key="index"
            effect="copy"
            @dragstart="dragstart"
            :style="`background:${item.color};`"
          >
            {{ item.text }}
          </li>
        </ul>
        <div class="interduce">
          <p>可拖动左侧元素到右侧表格中</p>
          <p>规则如下：</p>
          <p>1、目标格为空时将元素置入表格</p>
          <p>2、目标格不为空时将已存在的元素覆盖掉</p>
          <p>3、拖动到非表格区域无效</p>
        </div>
      </div>
      <div class="right">
        <table border="solid 1px #0a4ff">
          <tr style="background: #bbb">
            <td>周一</td>
            <td>周二</td>
            <td>周三</td>
            <td>周四</td>
            <td>周五</td>
            <td>周六</td>
            <td>周日</td>
            <td style="background: #999">规划表</td>
          </tr>
          <tr v-for="tr in 7" :key="tr">
            <td
              v-for="td in 7"
              :key="td"
              :id="td"
              effect="copy"
              @dragstart="dragstart"
              @drop="drop"
              @dragover="dragover"
              @dragenter="dragenter"
              @dragleave="dragleave"
              @dragend="dragend"
              @dblclick="dblclick"
            ></td>
            <td style="background: #bbb">{{ "时间段" + tr }}</td>
          </tr>
        </table>
        <div class="interduce">
          <p>可拖动单元格元素到其他单元格中</p>
          <p>规则如下：</p>
          <p>1、目标格为空时则变更元素位置</p>
          <p>2、目标格不为空时复制自己将已存在的元素覆盖掉</p>
          <p>3、拖动到非表格区域无效</p>
          <p>4、双击可以删除元素</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Drag",
};
</script>

<script setup>
import { ref } from "vue";
import { message } from "ant-design-vue";

const options = [
  {
    text: "选项一",
    color: "red",
  },
  {
    text: "选项二",
    color: "green",
  },
  {
    text: "选项三",
    color: "blue",
  },
  {
    text: "选项四",
    color: "purple",
  },
  {
    text: "选项五",
    color: "black",
  },
  {
    text: "选项六",
    color: "maroon",
  },
  {
    text: "选项七",
    color: "orange",
  },
  {
    text: "选项八",
    color: "gray",
  },
  {
    text: "选项九",
    color: "sync",
  },
];

const source = ref(null);

const dragstart = (e) => {
  source.value = e.target;
};

const dragover = (e) => {
  e.preventDefault();
};

const dragenter = (e) => {
  if (e.target.innerHTML) return;
  document
    .querySelectorAll("td")
    .forEach((item) => (item.style.background = "none"));
  e.preventDefault();
  e.target.style.background = "#dde";
};

const dragleave = (e) => {
  if (e.target.innerHTML) return;
  e.target.style.background = "none";
};

const drop = (e) => {
  // 如果都是copy就是首次拖拽，如果有值说明要替换该元素
  if (
    e.target.attributes.effect.value === source.value.attributes.effect.value ||
    e.target.innerHTML
  ) {
    if (source.value === e.target) {
      return;
    }
    e.target.innerHTML = "";
    const cloned = source.value.cloneNode(true);
    cloned.attributes.effect.value = "move";
    e.target.appendChild(cloned);
  } else {
    source.value.parentNode.innerHTML = "";
    e.target.appendChild(source.value);
    source.value = null;
  }
  // 清除over的背景色，删除该语句后在表格里移动会有颜色残留
  e.target.style.background = "none";
};

// 双击删除元素
const dblclick = (e) => {
  e.target.parentNode.innerHTML = "";
  message.success("删除成功");
};
</script>

<style lang='scss' scoped>
.drag {
  h2 {
    text-align: center;
  }
  .box {
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: space-between;
    .left {
      width: 30%;
      height: 100%;
      margin-right: 5%;
      background: #ccc;
      ul {
        background: #ccc444;
        padding: 20px 20px 5px 20px;
        display: flex;
        flex-wrap: wrap;
        li {
          list-style: none;
          background: #00a4ff;
          height: 50px;
          width: 100px;
          text-align: center;
          line-height: 50px;
          margin-bottom: 6%;
          margin-left: 6%;
          border-radius: 5px;
          color: #fff;
        }
      }
    }
    .right {
      width: 70%;
      height: 100%;
      background: #ccc;
      padding: 3%;
      padding-right: 8%;
      table {
        tr {
          td {
            width: 104px;
            height: 54px;
            text-align: center;
            line-height: 50px;
            padding: 2px;
            box-sizing: border-box;
            li {
              list-style: none;
              background: #00a4ff;
              height: 50px;
              width: 100px;
              text-align: center;
              line-height: 50px;
              border-radius: 5px;
              color: #fff;
            }
          }
        }
      }
    }
    .interduce {
      margin-top: 10px;
      background: yellowgreen;
      padding: 20px;
      font-size: 12px;
      color: #fff;
      p{
        margin: 0;
      }
    }
  }
}
</style>